<template>
  <div class="pie-chart">
    <div id="pie"></div>
  </div>
</template>

<script>
import * as echarts  from 'echarts';
export default {
    name:'PieChart',
    mounted() {
        // 基于准备好的dom，初始化echarts实例,还可以用refs
        var myChart = echarts.init(document.getElementById('pie'));
        // 绘制图表
myChart.setOption({
  title: {
    text: '饼图'
  },
   tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
    //   radius: '50%',
       data: [
        { value: 1048, name: '衬衫' },
        { value: 735, name: '羊毛衫' },
        { value: 580, name: '雪纺衫' },
        { value: 484, name: '裤子' },
        { value: 300, name: '高跟鞋' },
        { value: 300, name: '袜子' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
window.PieChart=myChart
//  window.onresize=function(){
//                 myChart.resize()
//             }
    },

}
</script>

<style scoped lang="scss">
#pie{
    height: 300px;
}
</style>